<!-- 功能权限 -->
<template>
  <div style="height: 750px; overflow: auto;" class="bg-white q-pa-md" id="function_pre">
    <div style="width: 100%;" class="row">
      <div style="width: 200px;" class="q-mt-xs q-mr-sm" >
        <q-select dense outlined options-dense v-model="headerSeach" :options="selectSeach" @update:model-value="changeSeach" />
      </div>
      <div v-show="headerSeach" style="width: 200px;" class="q-mr-sm q-mt-xs">
        <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense @keyup.enter="seachQuery" />
      </div>
      <q-space />
      <q-select
        v-model="visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="'表头选择'"
        :options="columns"
        option-value="name"
        options-cover
        style="width: 150px;"
        class="q-mr-sm q-mt-xs"
        @update:model-value="changeVisibleCol"
      />
      <q-btn
        flat round dense
        :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
        @click="toggleFullscreen"
      />
    </div>
    <q-markup-table flat class="relative-position">
      <thead>
        <th v-for="col in columns" :key="col.name" class="text-center">
          <span v-if="col.isShow">
            {{ col.label }}
            <q-icon v-if="col.isSort" class="cursor-pointer" size="18px" :name="descending?'expand_less':'expand_more'" @click="handlerSort" />
          </span>
        </th>
      </thead>
      <tbody>
        <div v-if="loading">
          <q-inner-loading showing color="grey" />
        </div>
        <tr v-for="row in dataList" :key="row.id">
          <td v-for="col in columns" :key="col.name" class="text-center">
            <span
              v-if="col.name !== 'is_view'
                    &&col.name !== 'is_add'
                    &&col.name !== 'is_change'
                    &&col.name !== 'is_del'
                    &&col.name !== 'is_all'
                    && col.isShow"
            >{{ row[col.name] }}</span>
            <q-checkbox
              v-if="col.name === 'is_view' && col.isShow"
              dense
              v-model="row.is_view"
              @update:model-value="selectedEvent(row, 'is_view')"
            />
            <q-checkbox
              v-if="col.name === 'is_add' && col.isShow"
              dense
              v-model="row.is_add"
              @update:model-value="selectedEvent(row, 'is_add')"
            />
            <q-checkbox
              v-if="col.name === 'is_change' && col.isShow"
              dense
              v-model="row.is_change"
              @update:model-value="selectedEvent(row, 'is_change')"
            />
            <q-checkbox
              v-if="col.name === 'is_del' && col.isShow"
              dense
              v-model="row.is_del"
              @update:model-value="selectedEvent(row, 'is_del')"
            />
            <q-checkbox
              v-if="col.name === 'is_all' && col.isShow"
              dense
              v-model="row.is_all"
              @update:model-value="selectedAllEvent(row)"
            />
          </td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

<script>
import { ref } from 'vue'
import { mapGetters } from 'vuex';
import { gainRolesPermission, updateRolesPermission } from 'src/api/permission'
export default {
  data () {
    return {
      // 右侧表头选择
      visibleColumns: ref([
        { name: 'id', required: true, label: 'ID', align: 'center',field: 'name', isShow: true, isSort: true },
        { name: 'name', required: true, label: '功能名称', align: 'center',field: 'name', isShow: true },
        { name: 'opt_url', required: true, label: 'API URL', align: 'center',field: 'opt_url', isShow: true },
        { name: 'code', required: true, label: '功能编号', align: 'center', field: 'code', isShow: true },
        { name: 'module', align: 'center', label: '模块名称', field: 'module', isShow: true },
        { name: 'is_view', align: 'center', label: '查看', field: 'is_view', isShow: true },
        { name: 'is_add', align: 'center', label: '增加', field: 'is_add', isShow: true },
        { name: 'is_change', align: 'center', label: '修改', field: 'is_change', isShow: true },
        { name: 'is_del', align: 'center', label: '删除', field: 'is_del', isShow: true },
        { name: 'is_all', align: 'center', label: '全选', field: 'is_all', isShow: true }
      ]),
      dataList: [],
      columns: [
        { name: 'id', required: true, label: 'ID', align: 'center',field: 'name', isShow: true, isSort: true },
        { name: 'name', required: true, label: '功能名称', align: 'center',field: 'name', isShow: true },
        { name: 'opt_url', required: true, label: 'API URL', align: 'center',field: 'opt_url', isShow: true },
        { name: 'code', required: true, label: '功能编号', align: 'center', field: 'code', isShow: true },
        { name: 'module', align: 'center', label: '模块名称', field: 'module', isShow: true },
        { name: 'is_view', align: 'center', label: '查看', field: 'is_view', isShow: true },
        { name: 'is_add', align: 'center', label: '增加', field: 'is_add', isShow: true },
        { name: 'is_change', align: 'center', label: '修改', field: 'is_change', isShow: true },
        { name: 'is_del', align: 'center', label: '删除', field: 'is_del', isShow: true },
        { name: 'is_all', align: 'center', label: '全选', field: 'is_all', isShow: true },
      ],
      // 表格头部
      headerSeach: ref(''),
      seachContent: {
       '功能名称':  'name',
        'API URL': 'opt_url'
      },
      selectSeach: [
        '', '功能名称','API URL'
      ],
      queryList: {},
      loading: false, // 表格的加载状态
      selected: [],
      descending: false
    };
  },

  components: {},

  computed: {
    ...mapGetters(['roleId'])
  },
  watch: {
    roleId: {
      immediate: true,
      handler(val) {
        if (!val || val === -1) {
          this.dataList = []
          this.dataCopy = []
          return
        }
        this.getFunctionPre()
      }
    }
  },

  mounted() {},

  methods: {
    // 获取功能操作权限
    getFunctionPre() {
      if (this.roleId === -1 || !this.roleId) {
        this.dataList = []
        this.dataCopy = []
      }
      const _query = {}
      _query.role_id = this.roleId
      _query.type = 3
      gainRolesPermission(_query).then(res => {
        const { status, data } = res
        if (status === 200) {
          data.forEach((element, index) => {
            const { is_view, is_add, is_change, is_del } = element
            element.id = index+ 1
            if (is_view && is_add && is_change && is_del) {
              element.is_all = true
            } else {
              element.is_all = false
            }
          });
          this.dataList = data.concat([])
          this.dataCopy = data.concat([])
        }
      })
    },
    /**
     * 选择事件
     */
    selectedEvent(row, keyName) {
      const _query = {}
      _query.role_id = this.roleId
      _query.type = 3
      _query.opt_url = row.opt_url
      _query[keyName] = row[keyName]
      updateRolesPermission(row.id, _query).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.getFunctionPre()
          this.$q.notify({
            position: 'top',
            type: 'positive',
            message: '修改成功！'
          })
        }
      })
    },
    /**
     * 每一行的全选事件
     */
    selectedAllEvent(row) {
      const _query = {}
      _query.role_id = this.roleId
      _query.type = 3
      _query.opt_url = row.opt_url

      if (row.is_all) {
        _query.is_view = true
        _query.is_add = true
        _query.is_change = true
        _query.is_del = true
      } else {
        _query.is_view = false
        _query.is_add = false
        _query.is_change = false
        _query.is_del = false
      }
      updateRolesPermission(row.id, _query).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.getFunctionPre()
          this.$q.notify({
            position: 'top',
            type: 'positive',
            message: '修改成功！'
          })
        }
      })
    },
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.$nextTick(_ => {
        const dom = document.getElementById('function_pre')
        this.$q.fullscreen.toggle(dom).then(_ => {
        }).catch(error => {
          console.log(error)
        })
      })
    },
    /**
     * 表头选择
     */
    changeVisibleCol(val) {
      for (let i=0; i<this.columns.length; i++) {
        this.columns[i].isShow = false
        for (let j=0; j<val.length; j++) {
          if (this.columns[i].name === val[j].name) {
            this.columns[i].isShow = true
          }
        }
      }
    },
    // 搜索
    seachQuery() {
      let _key = this.seachContent[this.headerSeach]
      if (!this.queryList[_key]) {
        this.dataList = this.dataCopy.concat([])
        return
      }
      this.dataList = this.dataList.filter(item => {
        return item[_key].indexOf(this.queryList[_key]) > -1
      })
    },
    // 切换搜索字段
    changeSeach(val) {
      if (!val) {
        this.queryList = {}
        this.dataList = this.dataCopy.concat([])
      }
    },
    /**
     * 排序
     */
    handlerSort() {
      this.descending = !this.descending
      this.dataList.reverse()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
